<template>
  <div class="alarm-management">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <span>报警类型 : </span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="typeSelect"  collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <span>持续时长 : </span>
      <div class="layoutBox" style="width:100px">
        <el-input-number v-model="duration" controls-position="right" :min="0"></el-input-number>
      </div> 分钟以上&emsp;&emsp;
      <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <ul class="alarm-statistics-list clear">
      <li>
        <div class="alarm-info">
          <p class="title">待巡检</p>
          <p class="content-text"><i class="icon-baojing iconfont"></i> {{ useTime }}个报警</p>
        </div>
      </li>
      <li>
        <div class="alarm-info">
          <p class="title">本周站点平均日巡检次数</p>
          <p class="content-text"><i class="iconfont icon-dongtaiguankong"></i> {{ taskNumber }}个</p>
        </div>
      </li>
      <li>
        <div class="alarm-info">
          <p class="title">现行日巡检规定次数：2次</p>
          <p class="content-text"><i class="iconfont icon-dongtaiguankong"></i> 2次</p>
        </div>
        <span class="setting">修改设置 > > </span>
      </li>
    </ul>
    <div class="alarm-modular modular-box">
      <div class="modular-head">
        <span class="title">报警列表</span>
        <div class="modular-toolbar">
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small">
              <el-radio-button label="1">全部</el-radio-button>
              <el-radio-button label="2">正常</el-radio-button>
              <el-radio-button label="3">异常</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-box" style="width: 164px;">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" class="search-input" placeholder="请输入"/>
          </div>
        </div>
      </div>
      <div class="modular-body">
         <el-scrollbar style="height: 100%">
           <ul class="alert-list">
             <li v-for="(item,index) in alarmList" :key="index">
               <el-row>
                 <el-col :span="8">
                   <p><i class="site-icon"></i><span class="site-name">{{ item.siteName }}</span></p>
                   <p class="content-text"><span>站点状态 : {{ item.contentText }}</span></p>
                 </el-col>
                 <el-col :span="4">
                   <p><span class="label-text">运维</span></p>
                   <p><span>{{ item.operation }}</span></p>
                 </el-col>
                 <el-col :span="4">
                   <p><span class="label-text">正常(ycxj20190101-01)</span></p>
                   <p><span>{{ item.startTime }}</span></p>
                 </el-col>
                 <el-col :span="4">
                   <p><span class="label-text">正常(ycxj20190101-01)</span></p>
                   <p><span>{{ item.startTime }}</span></p>
                 </el-col>
                 <el-col :span="4" style="text-align:center">
                   <el-button type="secondBtn">远程巡检</el-button>
                   <el-button type="secondBtn">巡检历史</el-button>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <div class="label-state-wrap">
                     <span class="label-state" style="margin-right:15px"> 实时工况 </span>
                    <span class="label-state state-a" v-if="item.stateType === 1"> 正常 </span>
                     <span class="label-state state-b" v-if="item.stateType === 2"> 报警 </span>
                      <span class="label-state state-c" v-if="item.stateType === 3"> 掉线 </span>
                   </div>
                 </el-col>
               </el-row>
             </li>
           </ul>
         </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'alarmManage',
  data(){
    return{
      dateRange:'',
      typeSelect:'',
      optionData:[],
      duration:'',
      useTime:'8',//待巡检
      taskNumber:'2',//本周站点平均日巡检次数
      alarmNumber:'8',//待处理报警数
      stateRadio: 1,
      alarmList:[{
        id:'1',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:70,
        alarmType:'仪器传输',
        stateType:1,
        handleState:1
      },{
        id:'2',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:30,
        alarmType:'仪器传输',
        stateType:2,
        handleState:0
      },{
        id:'1',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:70,
        alarmType:'仪器传输',
        stateType:3,
        handleState:2
      },{
        id:'1',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:70,
        alarmType:'仪器传输',
        stateType:1,
        handleState:1
      },{
        id:'2',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:30,
        alarmType:'仪器传输',
        stateType:2,
        handleState:0
      },{
        id:'1',
        siteName:'生米',
        contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
        operation:'吴加好（宇星）',
        startTime:'2016-06-16 14:03',
        usedTime:'00:45:00',
        usedProgress:70,
        alarmType:'仪器传输',
        stateType:1,
        handleState:2
      }]
    }
  },
  created(){
    this.$store.commit("setShowlefttree", true);
  }
}
</script>

<style scoped lang="less">
.alarm-management{
  height: 100%;
  .alarm-statistics-list{
    margin-top: 6px;
    li{
      float: left;
      border: 1px solid #d9e6f7;
      width: calc(33.33% - 4px);
      margin-right: 6px;
      text-align: center;
      position: relative;
      &:last-child{
        margin-right: 0;
      }
      .alarm-info{
        display: inline-block;
        padding: 16px 0;
        text-align: left;
        .title{
          color: #666666;
          line-height: 24px;
          margin-bottom: 4px;
        }
        .content-text{
          font-size: 22px;
          line-height: 30px;
          i{
            color: #166dce;
          }
          .iconfont{
            font-size: 22px;
          }
        }
      }
      .setting{
        position: absolute;
        right: 6px;
        bottom: 6px;
        color: #666666;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
  .alarm-modular{
    height: calc(100% - 155px);
    margin-top: 6px;
    .modular-toolbar{
      float: right;
    }
  }
}
.modular-box{
  border: 1px solid #dce9fa;
  .modular-head{
    padding: 7px 12px;
    border-bottom: 1px solid #dce9fa;
    line-height: 30px;
    .title{
      font-size: 16px;
    }
    .title:before{
      content:'';
      display: inline-block;
      width: 3px;
      height: 10px;
      background: #166bce;
      margin: 0 6px 1px 0;
    }
  }
  .modular-body{
    height: calc(100% - 45px);
    .alert-list{
      padding: 0 16px;
      &>li{
        padding: 20px 0;
        border-bottom: 1px solid #dce9fa;
        .el-col{
          line-height: 26px;
          color: #666666;
          padding-right: 32px;
          position: relative;
          &:first-child{
            padding-left: 28px;
          }
        }
        .site-icon{
          position: absolute;
          width: 20px;
          height: 29px;
          background: url("../../assets/images/state-icon.png") no-repeat;
          left: 0;
          top: 0;
        }
        .content-text{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .site-name{
          font-size: 16px;
          color: #333;
          font-weight: 700;
        }
        .label-text{
          color: #999999;
        }
        .progress-wrap{
          padding-top: 10px;
        }
        .label-state{
          display: inline-block;
          vertical-align: top;
          width: 70px;
          height: 24px;
          line-height: 22px;
          text-align: center;
          border: 1px solid #166bce;
          border-radius: 12px 0;
          font-size: 12px;
          color: #166bce;
        }
        .label-state-wrap{
          padding-top: 8px;
        }
        .state-a{
          color: #36c25e;
          border-color: #36c25e;
        }
        .state-b{
          color: #ff3333;
          border-color: #ff3333;
        }
         .state-c{
          color: #ff7e00;
          border-color: #ff7e00;
        }
      }
      &>li:last-child{
        border-bottom: none;
      }
    }
  }
}
.state-radio-wrap{
  display: inline-block;
  vertical-align: top;
}
.search-box{
  display: inline-block;
  vertical-align: top;
  position: relative;

  height: 30px;
  line-height: 30px;
  .icon-sousuo{
    position: absolute;
    right: 10px;
    top: 0;
    color: #7c8fa4;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
  }
  .icon-sousuo:hover{
    color: #166bce;
  }
  .icon-sousuo:active{
    color: #1056a7;
  }
  .search-input{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    padding-left: 5px;
    padding-right: 32px;
    outline: none;
    border: 1px solid #c6d1de;
  }
}
</style>
